<template>
  <a-table v-if="dataSource.length" :columns="columns" :data-source="dataSource" size="small" rowKey="name"
    childrenColumnName="sub" defaultExpandAllRows>
    <template #expandIcon="{ record, onExpand, expanded }">
      <span v-if="record.sub && record.sub.length > 0" style="margin-right: 0.2rem;" @click="onExpand(record)">
        <DownOutlined v-if="expanded" />
        <RightOutlined v-else></RightOutlined>
      </span>
    </template>
  </a-table>
</template>
<script lang="ts">
import { getOriginRefBySchema, parserResponse } from "@/utils/swigger";
import { computed, defineComponent } from "vue";
import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    DownOutlined,
    RightOutlined,
  },
  name: "RefTable",
  props: {
    response: {
      default: () => ({}),
      type: Object,
    },
    definitions: {
      default: () => ({}),
      type: Object,
    },
    isTree: {
      default: () => false,
      type: Boolean,
    },
    lastOriginRef: {
      default: () => "",
      type: String,
    }
  },
  setup(props) {
    const columns = [
      {
        title: "参数",
        dataIndex: "name",
      },
      {
        title: "类型",
        dataIndex: "type",
      },
      {
        title: "描述",
        dataIndex: "description",
      },
    ]

    const dataSource = computed(() => {
      const resp = parserResponse(props.response)
      return resp
    })

    return {
      dataSource,
      columns,
      getOriginRefBySchema
    }
  },
});
</script>
<style lang="less" scoped></style>